<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Result 结果</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">用于对用户的操作结果或者异常状态做反馈。</p>
	<el-row>
		<el-col :sm="12" :lg="6">
			<el-result icon="success" title="成功提示" sub-title="请按照说明操作">
				<template #extra>
					<el-button type="primary">返回</el-button>
				</template>
			</el-result>
		</el-col>
		<el-col :sm="12" :lg="6">
			<el-result icon="warning" title="警告提示" sub-title="请按照说明操作">
				<template #extra>
					<el-button type="primary">返回</el-button>
				</template>
			</el-result>
		</el-col>
		<el-col :sm="12" :lg="6">
			<el-result icon="error" title="错误提示" sub-title="请按照说明操作">
				<template #extra>
					<el-button type="primary">返回</el-button>
				</template>
			</el-result>
		</el-col>
		<el-col :sm="12" :lg="6">
			<el-result icon="info" title="一般信息提示">
				<template #sub-title>
					<i>使用槽作为副标题</i>
				</template>
				<template #extra>
					<el-button type="primary">返回</el-button>
				</template>
			</el-result>
		</el-col>
	</el-row>
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">利用插槽，自定义各区域内容</p>
	<el-result title="404" sub-title="Sorry, request error">
		<template #icon>
			<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
		</template>
		<template #extra>
			<el-button type="primary">返回</el-button>
		</template>
	</el-result>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>